<template>
  <div class="detailWrapper">
    <el-form
      :inline="true"
      ref="headForm"
      :model="headFormData"
      class="search-form"
    >
      <el-form-item
        :label="tabMenu[isActive - 1].name + `名称`"
        class="form-input"
      >
        <el-input clearable v-model="headFormData.search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit(1)"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <div class="server-table">
      <div class="table-title">
        <span></span>
        <div>
          <el-button type="primary" size="small" @click="linkToTagPage"
            >标注模式</el-button
          >
        </div>
      </div>
      <div class="tabs">
        <div>
          <ul class="tabWrapper">
            <li
              v-for="(item, index) in tabMenu"
              :key="index"
              :class="{
                [item.comp]: item.num,
                active: isActive == item.num ? true : false,
              }"
              @click="clickTab(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="tabBody" v-loading="tabLoading">
          <div v-if="isActive === '1'">
            <el-table :data="entityList" class="km-table">
              <el-table-column
                type="index"
                width="50"
                label="ID"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="entityName"
                label="实体"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.entityName.indexOf('data:image/png;') > -1"
                    ><img :src="scope.row.entityName" class="imgStyle"
                  /></span>
                  <span v-else> {{ scope.row.entityName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="entityTypeName"
                label="所属类别"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <!-- <el-table-column
                label="操作"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <el-link
                    :underline="false"
                    type="primary"
                    class="ontology-edit"
                    @click.native.prevent="deleteTaggedData(scope.row.id)"
                    >删除</el-link
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next, sizes, jumper"
              :total="entityTotal"
              :hide-on-single-page="!entityTotal"
              :page-size.sync="headFormData.page_size"
              :pager-count="7"
              :page-sizes="[10, 20, 30]"
              :current-page="headFormData.page_index"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <div v-else-if="isActive === '2'">
            <el-table :data="propertyList" class="km-table">
              <el-table-column
                type="index"
                width="50"
                label="ID"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="annotationEntityName"
                label="实体名称"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="propertyName"
                label="属性名"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="propertyValue"
                label="属性值"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <!-- <el-table-column
                label="操作"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <el-link
                    :underline="false"
                    type="primary"
                    class="ontology-edit"
                    @click.native.prevent="deleteTaggedData(scope.row.id)"
                    >删除</el-link
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="propertyTotal"
              :hide-on-single-page="!propertyTotal"
              :page-size.sync="headFormData.page_size"
              :pager-count="7"
              :page-sizes="[10, 20, 30]"
              :current-page="headFormData.page_index"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>

          <div v-else>
            <el-table :data="relationList" class="km-table">
              <el-table-column
                type="index"
                width="50"
                align="center"
                label="ID"
              ></el-table-column>
              <el-table-column
                prop="entityName1"
                label="头实体"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.entityName1.indexOf('data:image/png;') > -1"
                    ><img :src="scope.row.entityName1"
                  /></span>
                  <span v-else> {{ scope.row.entityName1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="relationName"
                label="关系"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="entityName2"
                label="尾实体"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.entityName2.indexOf('data:image/png;') > -1"
                    ><img :src="scope.row.entityName2"
                  /></span>
                  <span v-else> {{ scope.row.entityName2 }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column
                label="操作"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <el-link
                    :underline="false"
                    type="primary"
                    class="ontology-edit"
                    @click.native.prevent="deleteTaggedData(scope.row.id)"
                    >删除</el-link
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination
              class="km-pagination"
              background
              :small="true"
              layout="total, prev, pager, next,sizes, jumper"
              :total="relationTotal"
              :hide-on-single-page="!relationTotal"
              :page-size.sync="headFormData.page_size"
              :pager-count="7"
              :page-sizes="[10, 20, 30]"
              :current-page="headFormData.page_index"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "detail",
  components: {},
  data: () => {
    return {
      headFormData: {
        search: "", // 文件名称
        // ontology_model_id: "", // 本体模型
        page_index: 1, // 页码
        page_size: 10, // 每页条数
      },
      entityList: [],
      propertyList: [],
      relationList: [],
      entityTotal: 1,
      propertyTotal: 1,
      relationTotal: 1,
      annotation_data_record_id: "",
      tabMenu: [
        {
          name: "实体",
          num: "1",
          comp: "entity",
        },
        {
          name: "属性",
          num: "2",
          comp: "property",
        },
        {
          name: "关系",
          num: "3",
          comp: "relation",
        },
      ],
      isActive: "1",
      tabLoading: false,
    };
  },
  computed: {},
  created() {
    this.annotation_data_record_id = this.$route.params.id;
    this.getEntityList();
  },
  methods: {
    // 切换标注模式
    linkToTagPage() {
      console.log("id", this.annotation_data_record_id);
      console.log('%c [  ]-299', 'font-size:13px; background:pink; color:#bf2c9f;', )
      this.$router.push({
        path: "/knowledgeGeneration/annotation/annotation",
        query: {
          annotation_data_record_id: this.annotation_data_record_id,
          file_id: this.$route.query.file_id,
        },
      });
    },

    // 切换 tab 页面
    clickTab(params) {
      this.isActive = params.num;
      this.headFormData.search = "";
      switch (params.num) {
        case "1":
          this.getEntityList();
          break;
        case "2":
          this.getPropertyList();
          break;
        case "3":
          this.getRelationList();
          break;
      }
    },

    // 修改当前页码
    handleCurrentChange(page) {
      this.headFormData.page_index = page;
      switch (this.isActive) {
        case "1":
          this.getEntityList();
          break;
        case "2":
          this.getPropertyList();
          break;
        case "3":
          this.getRelationList();
          break;
      }
    },
    // 修改当前页码
    handleSizeChange() {
      switch (this.isActive) {
        case "1":
          this.getEntityList();
          break;
        case "2":
          this.getPropertyList();
          break;
        case "3":
          this.getRelationList();
          break;
      }
    },

    // 获取实体列表
    async getEntityList() {
      this.tabLoading = true;
      const { search: entity_name, page_index, page_size } = this.headFormData;
      let params = {
        annotation_data_record_id: this.annotation_data_record_id,
        entity_name,
        page_index,
        page_size,
      };
      let res = await this.$api.knowledgeGeneration.annotationEntityList(
        params
      );
      if (res.data.code !== 200) {
        this.$message.warning(res.data.message);
        return;
      }
      this.entityList = res.data.data.list;
      this.entityTotal = res.data.data.total;
      this.headFormData.page_index = res.data.data.pageNum;
      this.headFormData.page_size = res.data.data.pageSize;
      this.tabLoading = false;
    },

    // 获取属性列表
    async getPropertyList() {
      this.tabLoading = true;
      const {
        search: property_name,
        page_index,
        page_size,
      } = this.headFormData;
      let params = {
        annotation_data_record_id: this.annotation_data_record_id,
        property_name,
        page_index,
        page_size,
      };
      let res = await this.$api.knowledgeGeneration.annotationPropertyList(
        params
      );
      if (res.data.code !== 200) {
        this.$message.warning(res.data.message);
        return;
      }
      this.propertyList = res.data.data.list;
      this.propertyTotal = res.data.data.total;
      this.headFormData.page_index = res.data.data.pageNum;
      this.headFormData.page_size = res.data.data.pageSize;
      this.tabLoading = false;
    },

    // 获取关系列表
    async getRelationList() {
      this.tabLoading = true;
      const {
        search: relation_name,
        page_index,
        page_size,
      } = this.headFormData;
      let params = {
        annotation_data_record_id: this.annotation_data_record_id,
        relation_name,
        page_index,
        page_size,
      };
      let res = await this.$api.knowledgeGeneration.annotationRelationList(
        params
      );
      if (res.data.code !== 200) {
        this.$message.warning(res.data.message);
        return;
      }
      this.relationList = res.data.data.list;
      this.relationTotal = res.data.data.total;
      this.headFormData.page_index = res.data.data.pageNum;
      this.headFormData.page_size = res.data.data.pageSize;
      this.tabLoading = false;
    },

    onSubmit(page_index) {
      this.headFormData.page_index = page_index
        ? page_index
        : this.headFormData.page_index;
      switch (this.isActive) {
        case "1":
          this.getEntityList();
          break;
        case "2":
          this.getPropertyList();
          break;
        case "3":
          this.getRelationList();
          break;
      }
    },

    // 删除
    deleteTaggedData(id) {
      console.log("id", id);
      this.$confirm(
        "是否确认删除所选标注数据？删除后数据不可恢复，请谨慎操作。",
        "删除标注数据",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 删除接口
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.imgStyle {
  width: 30px;
  height: 30px;
}
.detailWrapper {
  .search-form {
    background: #ffffff;
    border-radius: 4px;
    padding: 16px 32px;
    .el-form-item {
      margin-bottom: 0;
    }

    .form-input {
      margin-right: 32px;
      .el-input {
        ::v-deep .el-input__inner {
          width: 240px;
          height: 32px;
          background: #ffffff;
          border-radius: 2px;
          border: 1px solid #e0e0e0;
        }
      }
    }
  }

  .server-table {
    margin-top: 16px;
    padding: 16px 32px 64px;
    background: #ffffff;
    border-radius: 4px;
    position: relative;

    .tagPatternBtn {
      position: absolute;
      right: 20px;
      top: 10px;
    }

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: -30px;
    }

    .tabs {
      width: 100%;
      border-radius: 2px;
    }

    // 样式
    .tabWrapper {
      display: flex;
      align-items: center;
      background: #fff;

      li {
        width: 60px;
        list-style: none;
        float: left;
        margin-left: 20px;
        font-size: 14px;
        margin: 0;
        text-align: center;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        border: 1px solid $--color-primary;
      }

      li.active {
        color: white;
        background-color: $--color-primary;
      }

      li.entity,
      li.property {
        border-right: none;
      }
    }

    .tabBody {
      margin-top: 20px;
      width: 100%;
      background: #fff;
      overflow: hidden;
    }

    .ontology-edit {
      padding: 0 10px;
    }
  }

  .dialog-inline {
    ::v-deep .el-form-item__content {
      width: 300px;
    }

    button.el-button {
      background-color: $--color-primary !important;
      color: #fff !important;
      line-height: 1.2;
    }
  }
}
</style>
